<template>
    <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
        <el-row>
            <el-col :span="12">
                <el-form-item prop="tplCategory">
                    <span slot="label">生成模板</span>
                    <el-select v-model="info.tplCategory" @change="tplSelectChange">
                        <el-option label="单表（增删改查）" value="crud"/>
                        <el-option label="树表（增删改查）" value="tree"/>
                        <el-option label="主子表（增删改查）" value="sub"/>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item prop="packageName">
          <span slot="label">
            生成包路径
            <el-tooltip content="生成在哪个java包下，例如 com.iswork.system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-input v-model="info.packageName"/>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item prop="moduleName">
          <span slot="label">
            生成模块名
            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-input v-model="info.moduleName"/>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item prop="businessName">
          <span slot="label">
            生成业务名
            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-input v-model="info.businessName"/>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item prop="functionName">
          <span slot="label">
            生成功能名
            <el-tooltip content="用作类描述，例如 用户" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-input v-model="info.functionName"/>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item>
          <span slot="label">
            上级菜单
            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <treeselect
                        v-model="info.parentMenuId"
                        :append-to-body="true"
                        :normalizer="normalizer"
                        :options="menus"
                        :show-count="true"
                        placeholder="请选择系统菜单"
                    />
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item prop="genType">
          <span slot="label">
            生成代码方式
            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
                    <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
                </el-form-item>
            </el-col>

            <el-col v-if="info.genType == '1'" :span="24">
                <el-form-item prop="genPath">
          <span slot="label">
            自定义路径
            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-input v-model="info.genPath">
                        <el-dropdown slot="append">
                            <el-button type="primary">
                                最近路径快速选择
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row v-show="info.tplCategory == 'tree'">
            <h4 class="form-header">其他信息</h4>
            <el-col :span="12">
                <el-form-item>
          <span slot="label">
            树编码字段
            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-select v-model="info.treeCode" placeholder="请选择">
                        <el-option
                            v-for="(column, index) in info.columns"
                            :key="index"
                            :label="column.columnName + '：' + column.columnComment"
                            :value="column.columnName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item>
          <span slot="label">
            树父编码字段
            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-select v-model="info.treeParentCode" placeholder="请选择">
                        <el-option
                            v-for="(column, index) in info.columns"
                            :key="index"
                            :label="column.columnName + '：' + column.columnComment"
                            :value="column.columnName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item>
          <span slot="label">
            树名称字段
            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-select v-model="info.treeName" placeholder="请选择">
                        <el-option
                            v-for="(column, index) in info.columns"
                            :key="index"
                            :label="column.columnName + '：' + column.columnComment"
                            :value="column.columnName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-show="info.tplCategory == 'sub'">
            <h4 class="form-header">关联信息</h4>
            <el-col :span="12">
                <el-form-item>
          <span slot="label">
            关联子表的表名
            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
                        <el-option
                            v-for="(table, index) in tables"
                            :key="index"
                            :label="table.tableName + '：' + table.tableComment"
                            :value="table.tableName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item>
          <span slot="label">
            子表关联的外键名
            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                    <el-select v-model="info.subTableFkName" placeholder="请选择">
                        <el-option
                            v-for="(column, index) in subColumns"
                            :key="index"
                            :label="column.columnName + '：' + column.columnComment"
                            :value="column.columnName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    components: {Treeselect},
    props: {
        info: {
            type: Object,
            default: null
        },
        tables: {
            type: Array,
            default: null
        },
        menus: {
            type: Array,
            default: []
        },
    },
    data () {
        return {
            subColumns: [],
            rules: {
                tplCategory: [
                    {required: true, message: "请选择生成模板", trigger: "blur"}
                ],
                packageName: [
                    {required: true, message: "请输入生成包路径", trigger: "blur"}
                ],
                moduleName: [
                    {required: true, message: "请输入生成模块名", trigger: "blur"}
                ],
                businessName: [
                    {required: true, message: "请输入生成业务名", trigger: "blur"}
                ],
                functionName: [
                    {required: true, message: "请输入生成功能名", trigger: "blur"}
                ],
            }
        };
    },
    created () {
    },
    watch: {
        'info.subTableName': function (val) {
            this.setSubTableColumns(val);
        }
    },
    methods: {
        /** 转换菜单数据结构 */
        normalizer (node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.menuId,
                label: node.menuName,
                children: node.children
            };
        },
        /** 选择子表名触发 */
        subSelectChange (value) {
            this.info.subTableFkName = '';
        },
        /** 选择生成模板触发 */
        tplSelectChange (value) {
            if (value !== 'sub') {
                this.info.subTableName = '';
                this.info.subTableFkName = '';
            }
        },
        /** 设置关联外键 */
        setSubTableColumns (value) {
            for (var item in this.tables) {
                const name = this.tables[item].tableName;
                if (value === name) {
                    this.subColumns = this.tables[item].columns;
                    break;
                }
            }
        }
    }
};
</script>
